@use "variables" as var;
@use "mixins";

.button {
  @include mixins.reset-button;

  height: var.$tab-height;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;

  border: var(--c-border) 1px solid;
  background: var(--c-button-background);
  color: var(--c-text);

  &:hover {
    background: var(--c-button-background-hover)
  }

  &:active {
    background: var(--c-button-background-active);
  }
}

.button:hover {
  background: initial;
}
